<template>
	<div class="goods-info page-shop-goods-item-item">
		<div class="goods-item-cover">
			<el-image style="width: 100px; height: 100px" :src="getCover(row)"
					  :preview-src-list="[getCover(row)]" />
		</div>
		<div class="goods-item-info">
			<div class="goods-name">
				<span class="store-name" v-if="'goods' === type && row.store_name">{{ row.store_name }}</span>
				{{ row.goods_name }}
			</div>
			<div class="spec-box" v-if="'order' === type">规格： {{ row.goods_option_title }}</div>
			<div class="cates-text" v-if="'goods' === type">
				<span v-show="row.cates_text">[{{ row.cates_text }}]</span>
				<span> ID：{{ row.id }}</span>
				<span v-show="row.spu"> 编码：{{ row.spu }}</span>
			</div>
			<div class="goods-tag" v-if="'goods' === type">
				<span class="tags recommand" v-show="row.is_recommand">[荐]</span>
				<span class="tags new" v-show="row.is_new">[新]</span>
				<span class="tags hot" v-show="row.is_hot">[热]</span>
			</div>
		</div>
		<div class="order-info" v-if="'order' === type">
			<div class="price-box">
				<div>￥{{ getMoneyByMinute(row.sell_price) }}</div>
				<div>x {{ row.total }}</div>
				<template v-if="getMoneyByMinute(row.sell_price * row.total) == getMoneyByMinute(row.paid)">
					<div>￥{{ getMoneyByMinute(row.sell_price * row.total) }}</div>
				</template>
				<template v-else>
					<div style="text-decoration: line-through;color: #CCC;">
						￥{{ getMoneyByMinute(row.sell_price * row.total) }}
					</div>
					<div>￥{{ getMoneyByMinute(row.paid) }}</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "goods-info-item",
	props: {
		row: { type: Object, default: () => {} },
		type: { type: String, default: "goods" },
		baseUrl: { type: String, default: "" }
	},
	methods: {
		getMoneyByMinute(_value) {
			return this.$TOOL.getMoneyByMinute(_value);
		},
		getCover(row) {
			if (this.type === 'goods') {
				return this.baseUrl + row.cover;
			} else if(this.type === 'order') {
				return this.baseUrl + row.goods_cover;
			}
			return '';
		}
	}
};
</script>

<style lang="scss" scoped>
.page-shop-goods-item-item {
	display: flex;
	.cates-text {
		color: #8d8b8b;
	}
	.goods-item-cover {
		.el-icon-picture-outline {
			font-size: 36px;
		}
	}
	.goods-item-info {
		margin-left: 5px;
		margin-top: 5px;

		.goods-name {
			color: #337ab7;
			.store-name {
				color: #d869b1;
				border: 1px solid #d869b1;
				font-weight: 700;
				padding: 3px 5px;
				margin-right: 5px;
			}
		}
		.spec-box {
			color: #19688b;
		}
	}
	.order-info {
		position: absolute;
		right: 15px;
		width: 58px;
		.price-box {
			text-align: right;
			color: #c77272;
			//cursor: pointer;
		}
	}
}
.goods-tag {
	.tags {
		cursor: pointer;
		margin: 0 2px;
		font-weight: 700;
		&.recommand {
			color: #409eff;
		}
		&.new {
			color: #67c23a;
		}
		&.hot {
			color: #f56c6c;
		}
	}
}
</style>
